<template>
	<div class="result-vue">
		<van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()" />
		<van-list
			v-model="loading"
			:finished="finished"
			finished-text="没有更多了"
			@load="onLoad"
		>
			<van-cell
				@click="$router.push(`/article?id=${item.art_id}`)"
				v-for="(item, index) in list"
				:key="index"
				:title="item.title"
			/>
		</van-list>
	</div>
</template>

<script>
import { getResultsAPI } from "@/api/search";
export default {
	data() {
		return {
			list: [],
			loading: false,
			finished: false,
			page: 1,
		};
	},
	methods: {
		async onLoad() {
			// 异步更新数据
			const res = await getResultsAPI({
				page: this.page++,
				q: this.$route.query.key,
			});
			// console.log(res);
			this.list.push(...res.data.results);
			// 加载状态结束
			this.loading = false;

			// 数据全部加载完成
			if (this.list.length >= res.data.total_count) {
				this.finished = true;
			}
		},
	},
	watch: {
		$route: {
			deep: true,
			handler() {
				this.finished = false;
				this.list = [];
				this.page = 1;
				this.onLoad();
			},
		},
	},
};
</script>

<style>
</style>